<template>
    <div>
        <el-row style="font-size: 14px;">
            <el-col :span="12">
                <sub-title title="格式化小数" class="mb20"></sub-title>
                <el-input size="mini" v-model="value" placeholder="请输入数字" />
                <div class="mt20" style="align-items: center;display: flex;">
                    <span>保留小数({{ len }}位)：</span>
                    <el-slider v-model="len" :max="16" style="width: 200px;">
                    </el-slider>
                    <span class="ml20">四舍五入：</span>
                    <el-switch v-model="halfAdjust" :width="58" :active-value="true" :inactive-value="false"
                        active-text="开启" inactive-text="关闭" active-color="#67C23A" inactive-color="#dcdfe6">
                    </el-switch>
                    <span class="ml20">严格模式：</span>
                    <el-switch v-model="strict" :width="58" :active-value="true" :inactive-value="false"
                        active-text="开启" inactive-text="关闭" active-color="#67C23A" inactive-color="#dcdfe6">
                    </el-switch>
                </div>
                <div class="mt20" style="align-items: center;display: flex;">
                    <span>格式化之后：</span>
                    <span>{{ formatValue }}</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SubTitle from "../../components/subTitle.vue";
export default {
    name: "Tools",
    components: {
        SubTitle,
    },
    data() {
        return {
            value: '',
            len: 2,
            returnType: 1,
            halfAdjust: true,
            strict: true,
        };
    },
    computed: {
        formatValue() {
            let value = this.value;
            let len = this.len;
            let returnType = this.returnType;
            let halfAdjust = this.halfAdjust;
            let strict = this.strict;
            return this.formatDigit(value, { len, returnType, halfAdjust, strict })
        }
    },
    created() { },
    methods: {
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
    height: 21px;
}

::v-deep .el-switch__label * {
    font-size: 12px;
}

/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
    z-index: 1;
    right: 22px;
}

/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
    z-index: 1;
    left: 22px;
}

/*显示文字*/
::v-deep .el-switch__label.is-active {
    display: block;
}
</style>
